@import "~assets/css/less.less";

.home{line-height:28px;
  .swiper-container{
    .text{position: absolute; color:#fff; width:100%; text-align: center; z-index:2; top:40%; line-height:50px;}
    h2{font-weight:normal; font-size:28px;}
    h1{margin-bottom:20px; font-size:54px;}
  }
  .swiper-wrapper{background:#000; text-align: center; position:relative; height:500px;
    .swiper-slide{overflow:hidden;
      i{display:block; width:100%; height:500px;}
      &.slide1{
        i{background:url("~assets/img/swiper_img1.jpg") 50% 50%/cover no-repeat;}
      }
      &.slide2{
        i{background:url("~assets/img/swiper_img2.jpg") 50% 50%/cover no-repeat;}
      }
    }
    .swiper-pagination{
      .swiper-pagination-bullet-active{background:#fff;}
    }
  }
  .swiper-pagination-bullet{background:#fff;}
  .part{
    width:720px; margin:110px auto 90px; font-size:18px; text-align:center; line-height:30px;
    strong{
      display:block; font-weight:normal; font-size:26px; color:#000; margin-bottom:20px;
    }
    a{display: block; width:240px; height:60px; background:#4C6E9D; border-radius: 100px; color:#fff; line-height:60px; text-align:center; margin:40px auto; font-size:20px;}
  }
  .part2{margin-bottom:110px; font-size:16px; text-align:center;
    li{display: inline-block; width:320px; margin-right:100px;
      &:first-child{
        i{background:url("~assets/img/part_icon1.png")0 0/contain no-repeat;}
      }
      &:last-child{margin:0;
        i{background:url("~assets/img/part_icon3.png")0 0/contain no-repeat;}
      }
      i{display: block; width:65px; height:65px; background:url("~assets/img/part_icon2.png")0 0/contain no-repeat; margin:0 auto 45px;}
      strong{font-size:20px; color:#000; display:block; font-weight: normal; margin-bottom:12px;}
    }
  }
  .part3{font-size:16px; background:#F5F8FA; overflow: hidden; padding:100px 0;
    .left{float:left; width:40%; line-height:28px;
      strong{display: block; font-size:26px; margin-bottom:30px; font-weight:normal; color:#000;}
    }
    ul{float:right; width:55%; text-align:right;
      li{display: inline-block; margin-right:1px;}
      img{vertical-align:bottom;}
    }
  }

  @media screen and (max-width: @maxwidth){
    .swiper-container{margin-top:100/@rem;
      .text{line-height:50/@rem; top:35%;}
      h2{font-weight:normal; font-size:36/@rem;}
      h1{margin-bottom:30/@rem; font-size:64/@rem;}
    }
    .swiper-wrapper{height:500/@rem;
      .swiper-slide{
        i{height:500/@rem;}
      }
    }
    .part{width:90%; margin:110/@rem auto 120/@rem; font-size:28/@rem; line-height:50/@rem;
      strong{font-size:38/@rem; margin-bottom:30/@rem;}
      a{width:400/@rem; height:90/@rem; font-size:32/@rem; line-height:90/@rem;}
    }
    .part2{margin-bottom:110/@rem;
      li{display:block; margin:0 auto 100/@rem;
        &:last-child{margin:auto;}
        i{margin-bottom:45/@rem;}
      }
    }
    .part3{padding:80/@rem 0;
      .left{float:none; width:90%; margin:0 auto 50/@rem;}
      ul{float:none; width:90%; text-align: left; margin:0 auto;
        li{margin:0; width:33.3%;
          img{width:100%;}
        }
      }
    }
  }
}